<template>
    <div>
        <el-row>
            <el-col :xs="24" :md="12" :style="{height: '350px'}">
                <vue-cropper
                        ref="cropper"
                        :img="options.img"
                        :info="true"
                        :autoCrop="options.autoCrop"
                        :autoCropWidth="options.autoCropWidth"
                        :autoCropHeight="options.autoCropHeight"
                        :fixedBox="options.fixedBox"
                        @realTime="realTime"
                />
            </el-col>
            <el-col :xs="24" :md="12" :style="{height: '350px'}">
                <span class="avatar-title">头像预览</span>
                <div class="avatar-upload-preview">
                    <img :src="previews.url" :style="previews.img" alt="头像"/>
                </div>
            </el-col>
        </el-row>
        <br/>
        <el-row>
            <el-col :lg="{span: 1, offset: 2}" :md="2">
                <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"/>
            </el-col>
            <el-col :lg="{span: 1, offset: 1}" :md="2">
                <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"/>
            </el-col>
            <el-col :lg="{span: 1, offset: 1}" :md="2">
                <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"/>
            </el-col>
            <el-col :lg="{span: 1, offset: 1}" :md="2">
                <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"/>
            </el-col>
            <el-col :lg="{span: 2, offset: 6}" :md="2">
                <el-button type="primary" size="small" @click="uploadImg()">上 传</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts">
    import {Component, Emit, Prop, Ref, Vue} from "vue-property-decorator";
    //https://github.com/xyxiao001/vue-cropper
    import {VueCropper} from "../vue-cropper";

    @Component({
        components: {
            VueCropper
        }
    })
    export default class Cropper extends Vue {

        @Prop({
            default: () => ({
                img: "", //裁剪图片的地址
                autoCrop: true, // 是否默认生成截图框
                autoCropWidth: 200, // 默认生成截图框宽度
                autoCropHeight: 200, // 默认生成截图框高度
                fixedBox: true // 固定截图框大小 不允许改变
            })
        })
        private options!: any;

        @Prop({
            default: "file"
        }) private formDataName!: string;

        @Ref("cropper") private cropper: any;


        private previews: any = {};

        // 向左旋转
        rotateLeft() {
            this.cropper.rotateLeft();
        }

        // 向右旋转
        rotateRight() {
            this.cropper.rotateRight();
        }

        // 图片缩放
        changeScale(num) {
            num = num || 1;
            this.cropper.changeScale(num);
        }

        // 上传图片
        uploadImg() {
            this.cropper.getCropBlob((data: any) => {
                let formData = new FormData();
                formData.append(this.formDataName, data);
                this.upload(formData);
                this.cropper.clearCrop();
            });
        }

        @Emit("upload")
        upload(res: any) {
            return res;
        }

        // 实时预览
        realTime(data:any) {
            this.previews = data;
        }

    }
</script>

<style scoped lang="scss">
    .avatar-title {
        display: block;
        text-align: center;
    }

    .avatar-upload-preview {
        position: absolute;
        top: 50%;
        transform: translate(50%, -50%);
        width: 180px;
        height: 180px;
        border-radius: 50%;
        box-shadow: 0 0 4px #ccc;
        overflow: hidden;
    }
</style>

